/*
  选择日期时间, 转成utcCron
  根据utcCron, 显示日期时间
 */
<template>
  <div>
    <div>
      日期:
      <el-select v-model="timeObj.date">
        <el-option
          v-for="item in timeObj.options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      时间:
      <el-time-picker v-model="timeObj.time" format="h:mm A" @change="timepicker" value-format="x"/>
      
      <el-button @click="time2cron(1)">转换</el-button>
      <p>{{cron}}</p>
    </div>
    <div>
      <el-date-picker
        v-model="dateTime"
        type="datetime"
        format="YYYY/MM/DD h:mm A"
        value-format="x"
      />
      <el-button @click="time2cron(2)">转换</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return{
      timeObj:{
        options:[],
        date:"",
        time:""
      },
      cron:"",
      dateTime:""
    }
  },
  computed:{
    defaultDateTime() {
      return new Date().setHours(24,0,0,0) + (2 * 60 * 60 * 1000)
    }
  },
  created() {
    this.cron2time()
  },
  methods:{
    cron2time() {
      function getWeek(val) {
        switch(val) {
          case 0: return 'Sunday';
          case 1: return 'Monday';
          case 2: return 'Tuesday';
          case 3: return 'Wednesday';
          case 4: return 'Thursday';
          case 5: return 'Friday';
          case 6: return 'Saturday';
        }
      }
      let now = new Date();
      // 时间归零, 只保留日期
      let today = now.setHours(0,0,0,0)
      // 保存生成的日期
      let options = []
      // 生成今天开始的五天
      for(let i = 0; i< 5; i++) {
        let label = "", value=new Date(today + i * 24 * 60 * 60 * 1000).getTime();
        label = new Date(value).getMonth()+1+"/"+new Date(value).getDate()+" "+getWeek(new Date(value).getDay()) 
        if(i==0) {
          label=new Date(value).getMonth()+1+"/"+new Date(value).getDate()+" Today"
        }
        if(i==1) {
          label=new Date(value).getMonth()+1+"/"+new Date(value).getDate()+" Tomorrow"
        }
        options.push({
          label,value
        })
      }

      this.timeObj.options = [...options]
      
      if(this.cron.length>0) {// 如果cron有值, 显示cron表示的日期时间
        let utcCron = this.cron.split(" ").map(Number);
        // console.log(utcCron)
        let date = new Date(Date.UTC(utcCron[5],utcCron[3] - 1,utcCron[2],utcCron[1],utcCron[0],0)).setHours(0,0,0,0)
        // console.log(Date.UTC(new Date().getUTCFullYear(),utcCron[3] - 1,utcCron[2],0,0,0),date)
        let dateWithTime = new Date().setHours(0,0,0,0) + Date.UTC(utcCron[5],utcCron[3] - 1,utcCron[2],utcCron[1],utcCron[0],0) - date
        // console.log(dateWithTime)
        this.timeObj.date = date
        this.timeObj.time = dateWithTime
        this.dateTime = new Date(Date.UTC(utcCron[5],utcCron[3] - 1,utcCron[2],utcCron[1],utcCron[0],0))
      } else {// 如果cron没有值, 默认显示第二天凌晨2:00
        this.timeObj.date = new Date().setHours(24,0,0,0)
        this.timeObj.time = new Date().setHours(2,0,0,0)
        this.dateTime = this.defaultDateTime
      }
    },
    time2cron(type) {
      let time,  date, utcMin, utcHour, utcDate, utcMon, utcYear;
      let now = new Date().setMilliseconds(0);
      switch (type) {
        case 1:
          time = this.timeObj.time - new Date().setHours(0,0,0,0)
          date = new Date(this.timeObj.date+time)
          if(this.timeObj.date + this.timeObj.time - new Date().setHours(0,0,0,0) - now < 0) {// 过去的时间
            this.$message.warning('这是过去的时间')
          }
          break;
        case 2:
           if(this.dateTime - now < 0) {// 过去的时间
            this.$message.warning('这是过去的时间')
          }
          date = new Date(this.dateTime)
          break;
        default: break;
      }
      utcMin = date.getUTCMinutes(), utcHour = date.getUTCHours(), utcDate = date.getUTCDate(), utcMon = date.getUTCMonth(), utcYear = date.getUTCFullYear();
      this.cron = `${utcMin} ${utcHour} ${utcDate} ${utcMon+1} * ${utcYear}`
    }
  }
}
</script>

<style>

</style>